<template>
    <div ref="popup1">
      <van-cell  class="is-require" :value="displayData" :title="title" is-link @click="showPopup = true" />
      <van-popup v-model="showPopup" position="bottom" :overlay="overlay">
        <van-picker
          show-toolbar
          ref="popup"
          @cancel="onCancel"
          @confirm="onConfirm"
          :columns="dataList"
          :value="value"
        />
      </van-popup>
    </div>
</template>
<script>
import Vue from 'vue'
import { Popup, Picker } from 'vant';

export default {
  name: 'zx-picker',
  components:{
    vanPicker: Picker,
    vanPopup: Popup
  },
  props: {
    value: {
      type: [String, Number, Array]
    },
    overlay: {
      type: Boolean,
      default() {
        return true;
      }
    },
    title: {
      type: String
    },
    dataList: {
      type: Array,
      require: true,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      showPopup: false,
      selectValue: ''
    };
  },
  watch: {
    showPopup() {
        if(this.showPopup) {
            this.$nextTick(() => {
              this.$refs.popup.setValues(this.value);
            })
        }
    }
  },
  mounted() {
      this.selectValue = this.value;
  },
  computed: {
    displayData() {
      return this.value.join(' ');
    }
  },
  methods: {
    onConfirm(value, index) {
      this.showPopup = false;
      this.$emit('input', value);
    },
    onCancel() {
      this.showPopup = false;
    }
  }
}
</script>
